<template>
  <div class="index">
    <lyhHeader></lyhHeader>
    <Swiper></Swiper>

    <div class="bd">
        <ul>
          <li @click="goHall">虚拟展厅</li>
          <li @click="goMeet">最佳卫星会评选</li>
          <li>CSCO报道专题</li>
          <li>App活动</li>
        </ul>
    </div>

  </div>
</template>

<script>
import lyhHeader from '@/components/Header.vue'
import Swiper from '@/components/Swiper.vue'

export default {
  name: 'index',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components: {lyhHeader, Swiper},
  methods: {
    goHall () {
      // this.$console('fuck')
      this.$router.push({name: 'Hall'})
    },
    goMeet () {
      this.$router.push({name: 'Meeting'})
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>

    .bd {
        background-color: #ebebeb;
        padding: 20px 0 20px 0;
        ul,li {
            margin: 0;
            padding: 0;
            background-color: #ebebeb;
            
        }
        li {
            margin: 0 auto;
            list-style: none;
            width: 260px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #fff;
            margin-bottom: 20px;
            border-radius: 5px;
            box-shadow: #d8cdd3 3px 3px 9px;
            color: #cd0070;
            font-size: 16px;


            &:last-child {
                margin-bottom: 0;
            }
        }
    }

</style>
